<template>
  <div class="row g-5">
    <template v-for="(item, index) in result.list" :key="index">
      <div class="col-md-6">
        <article class="entry" @click="jumpDetail(item.id)">
          <div class="entry-img">
            <img
              :src="
                $getImgUrlFromMediaById(item.featured_media_src_url)
                  ? $getImgUrlFromMediaById(item.featured_media_src_url)
                  : require('@/assets/image/banner-default.png')
              "
              alt=""
              class="img-fluid"
            />
          </div>
          <div class="entry-content">
            <h3 class="entry-title">
              <a
                @click="jumpDetail(item.id)"
                :title="$wordpressDecodeHTML(item.title.rendered)"
              >
                {{ $wordpressDecodeHTML(item.title.rendered) }}</a
              >
            </h3>

            <div class="entry-summary multirow">
              <span
                style=""
                class=""
                :title="$deleteHtmlTag(item.excerpt.rendered)"
              >
                {{ $deleteHtmlTag(item.excerpt.rendered) }}
              </span>
            </div>

            <div class="entry-meta position-relative">
              <div class="position-absolute bottom-0 start-0">
                <span class="author">Admin</span>
                <span class="date"> {{ item.date.replace("T", " ") }}</span>
              </div>
              <div class="position-absolute bottom-0 end-0">
                <a class="read-more" @click="jumpDetail(item.id)">
                  read more
                  <i class="fa fa-long-arrow-right"> </i>
                </a>
              </div>
            </div>
          </div>
        </article>
      </div>
    </template>
    <!-- 分页 -->
    <div class="col-12 d-flex justify-content-center">
      <a-pagination
        v-model:current="params.page"
        v-model:pageSize="params.per_page"
        :total="result.total"
        show-less-items
        @change="onPageChange"
      />
    </div>
  </div>

  <div class="row"></div>
</template>

<script setup>
import { getArticleList } from "@/api/index";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
  computed,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  params: {
    page: 1,
    per_page: 10,
    categories: computed(() =>
      proxy.$route.query.category ? proxy.$route.query.category : 22
    ),
    search: computed(() =>
      proxy.$route.query.keyword ? proxy.$route.query.keyword : ""
    ),
  },
  result: {
    list: [],
    total: 0,
  },
});
const { params, result } = toRefs(data);

onBeforeMount(() => {
  console.log("默认参数", proxy.$route.query);
  //
  getList();
});
onMounted(() => {});

// 自定义方法
function jumpDetail(id) {
  proxy.$router.push(`/blog/detail/${id}`);
}
function onPageChange(pageNumber) {
  data.params.page = pageNumber;
  getList();
}
function getList() {
  getArticleList(data.params).then((res) => {
    // 获取总数
    let headers = res.headers;
    data.result.total = parseInt(headers["x-wp-total"]);
    //
    data.result.list = res.data;
  });
}
</script>
<style lang="scss" scoped>
.entry {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);

  .entry-img {
    overflow: hidden;
    // height: 20vh;

    img {
      width: 100%;
      height: 20vh;
    }
  }

  .entry-title {
    font-size: 1.5rem;
    font-weight: bold;
    padding: 0;
    margin: 15px 0 15px 0;
    overflow: hidden; /*对超出容器的部分强制截取，高度不确定则换行*/
    text-overflow: ellipsis; /*显示省略符号来代表被修剪的文本。*/
    white-space: nowrap; /*禁止换行*/

    a {
      color: #1e4356;
      transition: 0.3s;
    }
  }

  .entry-content {
    padding: 15px;
  }

  .entry-meta {
    margin-top: 30px;
    color: #72afce;

    .author {
      //   margin-left: 20px;
    }

    .date {
      margin-left: 20px;
    }

    a.read-more {
      //   background: #68a4c4;
      font-weight: 600;
      text-transform: uppercase;
      line-height: 1;
      color: #2f3437;
      padding: 6px 20px;
      transition: 0.3s;
      font-size: 14px;
    }
  }

  .entry:hover {
    // box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    // transition: all 0.5s;
    // -webkit-transition: all 0.5s;
  }
}
</style>
